<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<title>微信签到系统</title>
	<link rel="stylesheet" href="./css/bootstrap.css">
	<script src="./js/jquery.js"></script>
	<script src="./js/bootstrap.min.js"></script>
	<style>
		.control-group{
			margin-bottom:15px;
		}
		.table tr th,.table tr td{
			text-align: center;
		}
		.home-title{
			font-size:18px;
			padding:3px 8px;
			border-left:5px solid #999;
		}
		.home-left{
			border:1px solid #999;
			border-radius:5px; 
			padding:5px;
		}
		.home-right{
			border:1px solid #999;
			border-radius:5px;
			padding:5px;
		}
		.signInfo p {
			margin:8px;
			padding:5px 0;
		}
		.signInfo strong {
			font-size:16px;
		}
		.signInfo span {
			font-size:15px;
		}
		.signInfo label {
			font-size:15px;
		}
		.timeOut{
			width:50px;
			height:50px;
			line-height:50px;
			padding-left:10px;
			order-radius:50%;
			display: inline-block;
			background: #4cae4c;
			color:#fff;
			font-size:18px;
			font-weight:bold;
		}
	</style>
</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
                 <button class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
                 </button>
                <a href="home" class="navbar-brand">微信签到系统</a>
          </div>
          <div class="collapse navbar-collapse" id="navbarCollapse">
          	<ul class="nav navbar-nav" style="margin-top:0">
				<li class="active"><a href="home">控制台</a></li>
				<li><a href="report?method=list" >签到统计</a></li>
				<li><a href="class?method=list">学生管理</a></li>
				<li><a href="notice?method=list">公告管理</a></li>
			</ul>
			 <p class="navbar-text navbar-right">
			 	${adminInfo.roleName }：<a href="#">${adminInfo.username }</a> | 
			 	<a href="adminManager?method=logout">退出</a>
			 </p>
		</div>
	</div>
</nav>
<div class="main container" style="margin-top:60px;">
	
	<div class="row">
		<div class="col-md-4">
			<h2 class="home-title">当前签到任务</h2>
			<div class="container-fulid  home-left">
				<c:if test="${signInfo.rspCode=='0000'}">
					<div class="signInfo">
						<p><strong>签到编号：</strong><span class="currentSignId">${signInfo.signId }</span></p>
						<p><strong>点名班级：</strong><span class="currentSignClassNames">${signInfo.classNames }</span></p>
						<p><strong>随机编码：</strong><label for="" class="label label-warning label-md">${signInfo.randNo }</label></p>
						<p><strong>签到状态：</strong><label for="" class="label label-success label-md">${signInfo.statusName }</label></p>
						<p><strong>签到计时：</strong>
						<span class="timeOut img-circle">
							<em class="timeNo">${signInfo.timeOut}</em> s
						</span>
						</p>
						<p><strong>创建时间：</strong>${signInfo.createtime }</p>
					</div>
					<div class="signButton">
						<button class="btn btn-danger btn-block" onclick="stopSignTask()">停止</button>
					</div> 
				</c:if>
				<c:if  test="${signInfo.rspCode!='0000'}">
					<div class="noSignInfo">
						<div class="alert alert-info">暂时没有签到任务，点击创建新建任务</div>
						<button class="btn btn-info btn-block" onclick="createSignTaskModal()">创建签到任务</button>
					</div>
				</c:if >
			</div>
		</div>
	
		<div class="col-md-8">
			<h2 class="home-title">签到记录</h2>
			<div class="container-fulid  home-right">
				<div class="table-container table-responsive">
					<table class="table table-striped table-hover table-responsive" >
						<thead>
						<tr>
							<th>签到编号</th>
							<th>点名班级</th>
							<th>随机码</th>
							<th class="hidden-xs">状态</th>
							<th class="hidden-xs">创建时间</th>
							<th class="hidden-xs">描述</th>
							<th>操作</th>
						</tr>
						</thead>
						<tbody>
						<c:choose>
							<c:when test="${page.list!=null && page.list.size()>0}">
								<c:forEach items="${page.list }" var="obj">
									<tr>
										<td>${obj.signId }</td>
										<td>
											<a href="#" title="${obj.classNames }" data-toggle="tooltip">${fn:substring(obj.classNames,0,9) }..</a>
											
										</td>
										<td>${obj.randNo }</td>
										<td class="hidden-xs">
											<c:choose>
												<c:when test="${obj.status==0 }">
													<label for="" class="label label-danger">${obj.statusName}</label>
												</c:when>
												<c:otherwise>
													<label for="" class="label label-success">${obj.statusName}</label>
												</c:otherwise>	
											</c:choose>
										</td>
										<td class="hidden-xs">${obj.createtime }</td>
										<td class="hidden-xs">${obj.desc }</td>
										<td>
										<%-- <a href="home?method=deleteSignTask&signId=${obj.signId }" onclick="return confirm('提示：确定要删除此记录么？')">删除</a> | --%>
										 <a title="查看本次签到任务详情" href="#" onclick="signTaskInfo(${obj.signId })">详情</a> | 
										 <a title="统计本次签到记录" href="report?method=signYes&signId=${obj.signId }">统计</a>
										 </td>
									</tr>
								</c:forEach>
							</c:when>
							<c:otherwise>
									<tr>
										<td colspan="8">暂无数据...</td>
									</tr>
							</c:otherwise>
						</c:choose>
						</tbody>
					</table>
				</div>
					 <ul class="pagination" id="pageul">
					 	<c:choose>
							<c:when test="${page.pageNow == 1}">
								<li class='disabled'><span>首页</span></li>
								<li class='disabled'><span>上一页</span></li>
							</c:when>
							<c:otherwise>
								<li><a href="javascript:void(0)">首页</a></li>
								<li><a href="javascript:void(0)">上一页</a></li>
							</c:otherwise>
						</c:choose>
							<c:forEach begin="${(page.navNo -1)*5 + 1}" end="${page.totalPage > 5*page.navNo?5*page.navNo:page.totalPage}" var="s">
								<li <c:if test='${page.pageNow == s}'>class='active'</c:if>><a href="javascript:void(0)">${s}</a></li>
							</c:forEach>
							<c:choose>
								<c:when test="${page.pageNow == page.totalPage}">
									<li class='disabled'><span>下一页</span></li>
									<li class='disabled'><span val="${page.totalPage}">尾页</span></li>
								</c:when>
								<c:otherwise>
									<li><a href="javascript:void(0)">下一页</a></li>
									<li><a href="javascript:void(0)" val="${page.totalPage}">尾页</a></li>
								</c:otherwise>
							</c:choose>
							<li  class="disabled"><span class="hidden-xs">总记录:${page.totalSize} | 页码:${page.pageNow}/${page.totalPage}</span></li>
					 </ul>
			</div>
		</div>
	
	</div>
</div>
<script>
	$(function(){
		$("a").tooltip({
			delay:{
				show:100,
				hide:100,
			},
			container:'body'
		});
		pageul(${page.pageNow});
		
		var sign = "${signInfo.rspCode}";
		if(sign!="0000"){
			//当前无数据
			
		}else{
			var time = $(".timeNo").html().trim();
			setSignTimeOut(time)
		}
		
	})
	
	function setSignTimeOut(time){
		setTimeout(function() {
			time--;
			$(".timeNo").html(time);
			if(time>0){
				setSignTimeOut(time);
			}else{
				//结束，请求终止任务
				stopSignTask();
			}
		},1000)
	}
	
	function stopSignTask(){
		$.ajax({
			type:"post",
			url:"home?method=stopSignTask",
			data:{
				signId:$(".currentSignId").html().trim()
			},
			success:function(rsp){
				obj = $.parseJSON(rsp);
				if(obj.rspCode==0000){
					location.reload();
				}
			},
			error:function(err,status){
			}
		});
	}


		/*初始化分页*/
	function pageul(page){
		$("#pageul > li > a").each(function() {
			$(this).click(function() {
				if ($(this).text() == '上一页') {
					showPage(page - 1);
					return;
				}else if ($(this).text() == '首页') {
					showPage(1);
					return;
				} else if ($(this).text() == '下一页') {
					showPage(page + 1);
					return;
				}else if ($(this).text() == '尾页') {
					showPage($(this).attr("val"));
					return;
				} else {
					showPage($(this).text());
				}
			});
		});
	}
		
	//显示评论,功能实现       		
	function showPage(pageNo){
		window.location.href="home?method=list&pageNo="+pageNo;
	}
	
	function createSignTaskModal(){
			$("#randNo").val(generateRandNo());
			$("#createModal").modal();
		}
	
	//刷新校验码
	function flashRandNo(){
		$("#randNo").val(generateRandNo());
	}
	
	function generateRandNo(){
		var Num="";
	    for(var i=0;i<6;i++)
	    {
	        Num+=Math.floor(Math.random()*10);
	    }
	    return Num;
	}
	
	function createSignTask(thisObj){
		var form = $("#signTaskForm").serialize();
		if(form.indexOf("cids")==-1){
			alert("请至少选择一个班级！");
			return false;
		}
		$.ajax({
			type:"post",
			url:"home?method=saveSignTask",
			data:form,
			success:function(rsp){
				obj = $.parseJSON(rsp);
				if(obj.rspCode==0000){
					location.reload();
				}else{
					alert("创建失败："+obj.rspDesc);
				}
			},
			error:function(err,status){
				alert("创建失败："+err.status);
			}
		});
	}
	
	
	function signTaskInfo(signId){
		$.ajax({
			type:"post",
			url:"home?method=infoSignTask",
			data:{
				signId:signId,
			},
			success:function(rsp){
				obj = $.parseJSON(rsp);
				$(".signIdInfo").html(obj.signId);
				$(".classNamesInfo").html(obj.classNames);
				$(".signTotalInfo").html(obj.signTotal);
				$(".signCountInfo").html(obj.signCount);
				$(".randNoInfo").html(obj.randNo);
				if(obj.status==0){
					$(".statusNameInfo").html(obj.statusName).css("background","#d9534f");
				}else{
					$(".statusNameInfo").html(obj.statusName);
				}
				$(".timeNoInfo").html(obj.timeOut);
				$(".createTimeInfo").html(obj.createtime);
				$("#infoModal").modal();
			},
			error:function(err,error){
				alert("网络出错，请稍后重试 : "+err.status);
			}
		});
		return false;
	}
</script>

<div class="modal" id="infoModal" data-backdrop="static">
    	<div class="modal-dialog" style="max-width:600px;">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
					<span class="glyphicon glyphicon-info-sign">签到任务详情</span>
    			</div>
    			<div class="modal-body">
    				<div class="signInfo">
						<p><strong>签到编号：</strong><span class="signIdInfo"></span></p>
						<p><strong>点名班级：</strong><span class="classNamesInfo"></span></p>
						<p><strong>总　人数：</strong><span class="signTotalInfo"></span></p>
						<p><strong>已　签到：</strong><span class="signCountInfo"></span></p>
						<p><strong>随机编码：</strong><label for="" class="label label-warning label-md randNoInfo"></label></p>
						<p><strong>签到状态：</strong><label for="" class="label label-success label-md statusNameInfo"></label></p>
						<p><strong>签到计时：</strong>
						<span class="timeOut img-circle">
							<em class="timeNoInfo"></em> s
						</span>
						<p><strong>创建时间：</strong><span class="createTimeInfo"></span></p>
					</div>
    			</div>
    			 <div class="modal-footer">
			        <button class="btn btn-danger" data-dismiss="modal">关闭</button>
			      </div>
    		</div>
    	</div>
    </div>
    
    
    
<div class="modal" id="createModal" data-backdrop="static">
    	<div class="modal-dialog" style="max-width:600px;">
    		<div class="modal-content">
    			<div class="modal-header">
    				<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
					<span class="glyphicon glyphicon-file">创建签到任务</span>
    			</div>
    			<div class="modal-body">
    				<form method="post" action="?" class="form-horizontal" id="signTaskForm">
					<div class="control-group">
						 <label class="control-label" for="signDesc">任务描述</label>
						  <input id="signDesc" class="form-control" type="text" 
						  name="signDesc" placeholder="请填写本次签到任务描述"/>
					</div>
					<div class="control-group">
						 <label class="control-label" for="randNo">随机编码</label>
						 <div class="input-group">
							  <input id="randNo" class="form-control" type="text" 
							  name="randNo" placeholder="随机生成的编码" readonly="readonly"/>
							  <div class="input-group-btn">
						 			<button type="button" class="btn btn-default" onclick="flashRandNo()" >刷新</button>
						 		</div>
					 		</div>
					</div>
					<div class="control-group">
						 <label class="control-label" for="classCids">签到班级</label>
						 <div class="input-group">
						 	<c:forEach items="${classList}" var="obj">
								<label class="checkbox-inline">
									<input type="checkbox" value="${obj.cid }" name="cids">${obj.className }
								</label>
							</c:forEach>
						</div>
					</div>
					<div class="control-group">
						 <label class="control-label" for="signTimeOut">倒计时</label>
						<select name="timeOut" id="signTimeOut" class="select form-control">
								<option value="5">5 秒</option>
								<option value="10">10 秒</option>
								<option value="15">15 秒</option>
								<option value="25">25 秒</option>
								<option value="30">30 秒</option>
								<option value="35">35 秒</option>
								<option value="45">45 秒</option>
								<option value="50">50 秒</option>
						</select>
					</div>
				</form>
    			</div>
    			 <div class="modal-footer">
    			 	 <button type="submit" class="btn btn-success" onclick="createSignTask(this)">确认创建</button>
			        <button class="btn btn-danger" data-dismiss="modal">关闭</button>
			      </div>
    		</div>
    	</div>
    </div>
</body>
</html>